<template>
    <div class="note">
        <h6>{{ tolist }}</h6>
        <input type="text" v-model="todoThing">
        <button @click="addTodo">+</button>
        <button @click="clear">clear</button>
        <ul>
            <li v-for="(item,index) in listData.list":key="item.id">
                <div class="thingss">
                    <div class="xuhao">{{ index+1 }}</div>
                    
                    <div class="thing">{{ item.todo }}</div>
                </div>
                
                <div class="delete" @click="deleteTodo(item.id)">x</div>
            </li>
            <hr>
            <div class="tsi">{{ listData.list.length }} 件事待做</div>
        </ul>
        
    </div>
</template>

<script setup lang='ts' name="NoteBook">
import { nanoid } from 'nanoid';
import { ref, reactive, computed } from 'vue'
import { type todoListData } from '@/types/NoteBook';

let todoThing = ref("")
let listData:todoListData = reactive({
    list:[],
})
let tolist = computed(()=>{
  let ls = []
  for(let i of listData.list){
    ls.push(i.todo)
  }
  return ls
})
function addTodo(){
    let newTodo = {
        id:nanoid(),
        todo:todoThing.value
    }
    listData.list.push(newTodo)
    // listData.list2.push(todoThing.value)
    todoThing.value = ''
}
function deleteTodo(id:string){
    listData.list = listData.list.filter((item)=>{
        return !(id === item.id)
    })
}
function clear(){
    listData.list.length = 0
}
</script>


<style lang='scss' scoped>
.note{
    ul{
        padding: 0;
    }
    li{
        list-style: none;
        width: 196px;
        // display: flex;
        // justify-content: space-between;
        position: relative;
        height: 30px;
        border: 1px solid rgba(177, 179, 185, 0.3);
    }
    .thing{
        display: inline-block;
        font-size: 20px;
        margin-left: 10px;
    }
    .xuhao{
        display: inline-block;
        font-size: 10px;
    }
    .delete{
        width: 10px;
        height: 10px;
        font-size: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: red;
        // background-color: red;
    }
    .tsi{
        font-size: 10px;
    }
}
</style>

